<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>CSS Test: @viewport constrained - max-width 200px</title>
  <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
  <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#constraining-procedure">
  <meta name="flags" content="visual scroll dom">
  <meta name="assert" content="Setting max-width in @viewport to a length smaller than the initial viewport width will set the actual viewport width to that length.">
  <script src="../../../resources/testharness.js" type="text/javascript"></script>
  <script src="../../../resources/testharnessreport.js" type="text/javascript"></script>
  <style type="text/css">
   body { margin: 0; }
   html, body, #test { width: 100%; height: 100%; }
   #log { padding: 1em; display: none; }
   /* Reset viewport values to initial values to ignore UA stylesheet. */
   @viewport {
    width: auto;
    height: auto;
    zoom: auto;
    min-zoom: auto;
    max-zoom: auto;
    user-zoom: zoom;
    orientation: auto;
    resolution: auto;
   }
  </style>
  <style type="text/css">
   /* CSS for the test below. */
   @viewport { max-width: 200px }
   /* Set root element font-size to something different from the initial
      font-size to make sure 'rem' and 'em' for @viewport is based on the
      initial font-size, not the root element font-size. */
   html { font-size: 2rem; }
   body { font-size: 0.5rem; }
  </style>
  <script type="text/javascript">
   var test = async_test("CSS Test: @viewport constrained - max-width 200px");
   window.onload = function(){

    var testStyleSheet = document.styleSheets.item(1);

    /* Initialize an object to store viewport values to be used by the test
       asserts. */
    var viewport = new Object();

    /* An element with the same size as the initial containing block. */
    var testElm = document.getElementById("test");

    if (window.testRunner) {
        viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
        viewport.initialWidth = 320;
        viewport.initialHeight = 352;

        var vpString = internals.viewportAsText(document, 1,
                                                viewport.initialWidth,
                                                viewport.initialHeight);

        var match = /viewport size (.+)x(.+) scale (.+ )/.exec(vpString);

        if (match) {
            viewport.actualWidth = parseFloat(match[1]);
            viewport.actualHeight = parseFloat(match[2]);
            viewport.zoom = parseFloat(match[3]);
        }
    }
    else {
        /* Disable the stylesheet that contains the @viewport to test. */
        testStyleSheet.disabled = true;

        /* Retrieve the initial viewport values before applying the @viewport to
           test. */
        viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
        viewport.initialWidth = testElm.offsetWidth;
        viewport.initialHeight = testElm.offsetHeight;

        /* Enable the stylesheet that contains the @viewport to test. */
        testStyleSheet.disabled = false;

        /* Retrieve the actual viewport values for the test. */
        viewport.actualWidth = testElm.offsetWidth;
        viewport.actualHeight = testElm.offsetHeight;
        viewport.zoom = viewport.initialWidth / window.innerWidth;
    }

    /* Check viewport values. */
    test.step(function(){
        assert_equals(viewport.actualWidth, 200);
    });

    /* Finished. Show the results. */
    test.done();
    testStyleSheet.disabled = true;
    document.getElementById("log").style.display = "block";
   }
  </script>
 </head>
 <body>
  <div id="test">
   <div id="log"></div>
  </div>
 </body>
</html>
